<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>干部管理中心 - 海城区文明实践</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: linear-gradient(135deg, rgb(229, 75, 54) 0%, rgb(240, 110, 30) 30%, rgb(255, 152, 0) 60%, rgb(255, 152, 0) 100%);
            min-height: 100vh;
            padding-bottom: 20px;
        }
        
        /* 顶部导航栏 */
        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .back-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            margin-right: 15px;
            color: #333;
            padding: 5px;
        }
        
        .header-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            flex: 1;
        }
        
        .header-user {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #666;
        }
        
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1976d2, #42a5f5);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
        }
        
        /* 欢迎区域 */
        .welcome-section {
            padding: 20px;
            color: white;
        }
        
        .welcome-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .welcome-subtitle {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 20px;
        }
        
        .welcome-time {
            font-size: 12px;
            opacity: 0.8;
        }
        
        /* 内容区域 */
        .content {
            padding: 0 20px;
        }
        
        /* 数据概览卡片 */
        .overview-section {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .section-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .overview-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        
        .overview-item {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 8px;
            padding: 15px 10px;
            text-align: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .overview-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .overview-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }
        
        .overview-item.users::before {
            background: linear-gradient(90deg, #4caf50, #8bc34a);
        }
        
        .overview-item.activities::before {
            background: linear-gradient(90deg, #2196f3, #64b5f6);
        }
        
        .overview-item.participants::before {
            background: linear-gradient(90deg, #ff9800, #ffb74d);
        }
        
        .overview-item.venues::before {
            background: linear-gradient(90deg, #9c27b0, #ba68c8);
        }
        
        .overview-number {
            font-size: 22px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .overview-label {
            font-size: 12px;
            color: #666;
            margin-bottom: 3px;
            line-height: 1.2;
        }
        
        .overview-trend {
            font-size: 10px;
            color: #4caf50;
        }
        
        /* 活动管理区域 */
        .activity-section {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .activity-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .filter-tabs {
            display: flex;
            gap: 8px;
            flex-wrap: nowrap;
        }
        
        .filter-tab {
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 16px;
            background: white;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 12px;
            white-space: nowrap;
            text-align: center;
            flex-shrink: 0;
        }
        
        .filter-tab.active {
            background: #1976d2;
            color: white;
            border-color: #1976d2;
        }
        
        .add-btn {
            background: #4caf50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .add-btn:hover {
            background: #45a049;
            transform: translateY(-1px);
        }
        
        .activity-list {
            space-y: 15px;
        }
        
        .activity-item {
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            transition: all 0.3s;
        }
        
        .activity-item:hover {
            border-color: #1976d2;
            box-shadow: 0 4px 15px rgba(25,118,210,0.1);
        }
        
        .activity-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }
        
        .activity-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .activity-status {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-ongoing {
            background: #e8f5e8;
            color: #4caf50;
        }
        
        .status-upcoming {
            background: #e3f2fd;
            color: #2196f3;
        }
        
        .status-ended {
            background: #fafafa;
            color: #999;
        }
        
        .activity-meta {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .activity-stats {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 12px;
            color: #999;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 数据图表区域 */
        .charts-section {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .chart-container {
            height: 200px;
            background: #f8f9fa;
            border-radius: 8px;
            position: relative;
            margin-bottom: 20px;
            padding: 20px;
        }
        
        .chart-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .line-chart {
            width: 100%;
            height: 160px;
            position: relative;
        }
        
        .chart-svg {
            width: 100%;
            height: 100%;
        }
        
        .chart-grid line {
            stroke: #e0e0e0;
            stroke-width: 1;
        }
        
        .chart-axis {
            stroke: #ccc;
            stroke-width: 1;
        }
        
        .chart-line {
            fill: none;
            stroke-width: 2;
        }
        
        .user-growth-line {
            stroke: #4caf50;
        }
        
        .activity-participation-line {
            stroke: #2196f3;
        }
        
        .chart-point {
            r: 4;
            fill: white;
            stroke-width: 2;
        }
        
        .user-growth-point {
            stroke: #4caf50;
        }
        
        .activity-participation-point {
            stroke: #2196f3;
        }
        
        .chart-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 10px;
            font-size: 12px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .legend-color {
            width: 12px;
            height: 2px;
            border-radius: 1px;
        }
        
        .legend-user {
            background: #4caf50;
        }
        
        .legend-activity {
            background: #2196f3;
        }
        
        /* 用户管理区域 */
        .users-section {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .user-item {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            margin-bottom: 15px;
        }
        
        .user-avatar-large {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff9800, #ffb74d);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .user-details {
            font-size: 13px;
            color: #666;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 5px;
        }
        
        
        /* 快捷操作 */
        .quick-actions {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .quick-action {
            background: white;
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
        }
        
        .quick-action:hover {
            transform: translateY(-2px);
        }
        
        .quick-action-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .quick-action-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .overview-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
            
            .overview-item {
                padding: 12px 8px;
            }
            
            .overview-number {
                font-size: 18px;
            }
            
            .overview-label {
                font-size: 11px;
            }
            
            .quick-actions {
                grid-template-columns: 1fr;
            }
            
            .activity-meta {
                flex-direction: column;
                gap: 5px;
            }
        }
        
        @media (max-width: 480px) {
            .overview-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .overview-number {
                font-size: 16px;
            }
            
            .overview-label {
                font-size: 10px;
            }
            
            .overview-trend {
                font-size: 9px;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="header">
        <button class="back-btn" onclick="history.back()">‹</button>
        <div class="header-title">干部管理中心</div>
        <div class="header-user">
            <div class="user-avatar">王</div>
            <span>王书记</span>
        </div>
    </div>
    
    <!-- 欢迎区域 -->
    <div class="welcome-section">
        <div class="welcome-title">欢迎回来，王书记</div>
        <div class="welcome-subtitle">海城区新时代文明实践管理平台</div>
        <div class="welcome-time" id="currentTime"></div>
    </div>
    
    <div class="content">
        <!-- 数据概览 -->
        <div class="overview-section">
            <div class="section-title">
                📊 数据概览
            </div>
            <div class="overview-grid">
                <div class="overview-item users" onclick="showUserDetails()">
                    <div class="overview-number">2,847</div>
                    <div class="overview-label">注册用户总数</div>
                    <div class="overview-trend">↗ 本月 +156</div>
                </div>
                <div class="overview-item activities" onclick="showActivityDetails()">
                    <div class="overview-number">68</div>
                    <div class="overview-label">发布活动总数</div>
                    <div class="overview-trend">↗ 本月 +12</div>
                </div>
                <div class="overview-item participants" onclick="showParticipantDetails()">
                    <div class="overview-number">1,523</div>
                    <div class="overview-label">活动参与人次</div>
                    <div class="overview-trend">↗ 本月 +289</div>
                </div>
                <div class="overview-item venues" onclick="showVenueDetails()">
                    <div class="overview-number">24</div>
                    <div class="overview-label">活跃阵地数量</div>
                    <div class="overview-trend">→ 无变化</div>
                </div>
            </div>
        </div>
        
        <!-- 快捷操作 -->
        <div class="quick-actions">
            <div class="quick-action" onclick="createActivity()">
                <div class="quick-action-icon">➕</div>
                <div class="quick-action-title">发布新活动</div>
            </div>
            <div class="quick-action" onclick="exportReport()">
                <div class="quick-action-icon">📋</div>
                <div class="quick-action-title">导出报表</div>
            </div>
        </div>
        
        <!-- 活动管理 -->
        <div class="activity-section">
            <div class="section-title">
                🎯 活动管理
            </div>
            <div class="activity-controls">
                <div class="filter-tabs">
                    <div class="filter-tab active" onclick="filterActivities('all')">全部</div>
                    <div class="filter-tab" onclick="filterActivities('ongoing')">进行中</div>
                    <div class="filter-tab" onclick="filterActivities('upcoming')">即将开始</div>
                    <div class="filter-tab" onclick="filterActivities('ended')">已结束</div>
                </div>
            </div>
            
            <div class="activity-list">
                <div class="activity-item">
                    <div class="activity-header">
                        <div>
                            <div class="activity-title">环保志愿服务活动</div>
                            <div class="activity-meta">
                                <span>📅 2024-10-28 09:00</span>
                                <span>📍 海城区环保站</span>
                                <span>👤 张明</span>
                            </div>
                        </div>
                        <div class="activity-status status-ongoing">进行中</div>
                    </div>
                    <div class="activity-stats">
                        <div class="stat-item">
                            <span>👥</span>
                            <span>已报名: 45/50</span>
                        </div>
                        <div class="stat-item">
                            <span>💰</span>
                            <span>预算: ¥2,000</span>
                        </div>
                        <div class="stat-item">
                            <span>⭐</span>
                            <span>评分: 4.8</span>
                        </div>
                    </div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-header">
                        <div>
                            <div class="activity-title">重阳节关爱老人活动</div>
                            <div class="activity-meta">
                                <span>📅 2024-10-30 14:00</span>
                                <span>📍 海城区养老院</span>
                                <span>👤 李华</span>
                            </div>
                        </div>
                        <div class="activity-status status-upcoming">即将开始</div>
                    </div>
                    <div class="activity-stats">
                        <div class="stat-item">
                            <span>👥</span>
                            <span>已报名: 32/40</span>
                        </div>
                        <div class="stat-item">
                            <span>💰</span>
                            <span>预算: ¥1,500</span>
                        </div>
                        <div class="stat-item">
                            <span>📝</span>
                            <span>待审核</span>
                        </div>
                    </div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-header">
                        <div>
                            <div class="activity-title">社区清洁美化行动</div>
                            <div class="activity-meta">
                                <span>📅 2024-10-25 08:00</span>
                                <span>📍 海城区各社区</span>
                                <span>👤 陈丽</span>
                            </div>
                        </div>
                        <div class="activity-status status-ended">已结束</div>
                    </div>
                    <div class="activity-stats">
                        <div class="stat-item">
                            <span>👥</span>
                            <span>参与: 78/80</span>
                        </div>
                        <div class="stat-item">
                            <span>💰</span>
                            <span>实际: ¥1,200</span>
                        </div>
                        <div class="stat-item">
                            <span>⭐</span>
                            <span>评分: 4.9</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 数据图表 -->
        <div class="charts-section">
            <div class="section-title">
                📈 数据趋势
            </div>
            <div class="chart-container">
                <div class="chart-title">用户增长趋势（最近6个月）</div>
                <div class="line-chart">
                    <svg class="chart-svg" viewBox="0 0 400 120">
                        <!-- 网格线 -->
                        <g class="chart-grid">
                            <line x1="40" y1="20" x2="40" y2="100"></line>
                            <line x1="40" y1="100" x2="360" y2="100"></line>
                            <line x1="40" y1="80" x2="360" y2="80"></line>
                            <line x1="40" y1="60" x2="360" y2="60"></line>
                            <line x1="40" y1="40" x2="360" y2="40"></line>
                            <line x1="40" y1="20" x2="360" y2="20"></line>
                        </g>
                        
                        <!-- 用户增长折线 -->
                        <polyline class="chart-line user-growth-line" 
                                  points="60,85 120,75 180,65 240,55 300,45 360,35"></polyline>
                        
                        <!-- 数据点 -->
                        <circle class="chart-point user-growth-point" cx="60" cy="85"></circle>
                        <circle class="chart-point user-growth-point" cx="120" cy="75"></circle>
                        <circle class="chart-point user-growth-point" cx="180" cy="65"></circle>
                        <circle class="chart-point user-growth-point" cx="240" cy="55"></circle>
                        <circle class="chart-point user-growth-point" cx="300" cy="45"></circle>
                        <circle class="chart-point user-growth-point" cx="360" cy="35"></circle>
                        
                        <!-- X轴标签 -->
                        <text x="60" y="115" text-anchor="middle" font-size="10" fill="#666">5月</text>
                        <text x="120" y="115" text-anchor="middle" font-size="10" fill="#666">6月</text>
                        <text x="180" y="115" text-anchor="middle" font-size="10" fill="#666">7月</text>
                        <text x="240" y="115" text-anchor="middle" font-size="10" fill="#666">8月</text>
                        <text x="300" y="115" text-anchor="middle" font-size="10" fill="#666">9月</text>
                        <text x="360" y="115" text-anchor="middle" font-size="10" fill="#666">10月</text>
                        
                        <!-- Y轴标签 -->
                        <text x="35" y="25" text-anchor="end" font-size="10" fill="#666">3000</text>
                        <text x="35" y="45" text-anchor="end" font-size="10" fill="#666">2500</text>
                        <text x="35" y="65" text-anchor="end" font-size="10" fill="#666">2000</text>
                        <text x="35" y="85" text-anchor="end" font-size="10" fill="#666">1500</text>
                        <text x="35" y="105" text-anchor="end" font-size="10" fill="#666">1000</text>
                    </svg>
                </div>
                <div class="chart-legend">
                    <div class="legend-item">
                        <div class="legend-color legend-user"></div>
                        <span>注册用户数</span>
                    </div>
                </div>
            </div>
            
            <div class="chart-container">
                <div class="chart-title">活动参与度分析（最近6个月）</div>
                <div class="line-chart">
                    <svg class="chart-svg" viewBox="0 0 400 120">
                        <!-- 网格线 -->
                        <g class="chart-grid">
                            <line x1="40" y1="20" x2="40" y2="100"></line>
                            <line x1="40" y1="100" x2="360" y2="100"></line>
                            <line x1="40" y1="80" x2="360" y2="80"></line>
                            <line x1="40" y1="60" x2="360" y2="60"></line>
                            <line x1="40" y1="40" x2="360" y2="40"></line>
                            <line x1="40" y1="20" x2="360" y2="20"></line>
                        </g>
                        
                        <!-- 活动参与度折线 -->
                        <polyline class="chart-line activity-participation-line" 
                                  points="60,70 120,60 180,80 240,50 300,40 360,45"></polyline>
                        
                        <!-- 数据点 -->
                        <circle class="chart-point activity-participation-point" cx="60" cy="70"></circle>
                        <circle class="chart-point activity-participation-point" cx="120" cy="60"></circle>
                        <circle class="chart-point activity-participation-point" cx="180" cy="80"></circle>
                        <circle class="chart-point activity-participation-point" cx="240" cy="50"></circle>
                        <circle class="chart-point activity-participation-point" cx="300" cy="40"></circle>
                        <circle class="chart-point activity-participation-point" cx="360" cy="45"></circle>
                        
                        <!-- X轴标签 -->
                        <text x="60" y="115" text-anchor="middle" font-size="10" fill="#666">5月</text>
                        <text x="120" y="115" text-anchor="middle" font-size="10" fill="#666">6月</text>
                        <text x="180" y="115" text-anchor="middle" font-size="10" fill="#666">7月</text>
                        <text x="240" y="115" text-anchor="middle" font-size="10" fill="#666">8月</text>
                        <text x="300" y="115" text-anchor="middle" font-size="10" fill="#666">9月</text>
                        <text x="360" y="115" text-anchor="middle" font-size="10" fill="#666">10月</text>
                        
                        <!-- Y轴标签 -->
                        <text x="35" y="25" text-anchor="end" font-size="10" fill="#666">1800</text>
                        <text x="35" y="45" text-anchor="end" font-size="10" fill="#666">1500</text>
                        <text x="35" y="65" text-anchor="end" font-size="10" fill="#666">1200</text>
                        <text x="35" y="85" text-anchor="end" font-size="10" fill="#666">900</text>
                        <text x="35" y="105" text-anchor="end" font-size="10" fill="#666">600</text>
                    </svg>
                </div>
                <div class="chart-legend">
                    <div class="legend-item">
                        <div class="legend-color legend-activity"></div>
                        <span>活动参与人次</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 用户管理 -->
        <div class="users-section">
            <div class="section-title">
                👥 活跃用户管理
            </div>
            
            <div class="user-item">
                <div class="user-avatar-large">张</div>
                <div class="user-info">
                    <div class="user-name">张明</div>
                    <div class="user-details">
                        <span>参与活动: 15次</span>
                        <span>积分: 1,250</span>
                        <span>志愿时长: 48h</span>
                    </div>
                </div>
            </div>
            
            <div class="user-item">
                <div class="user-avatar-large" style="background: linear-gradient(135deg, #4caf50, #8bc34a);">李</div>
                <div class="user-info">
                    <div class="user-name">李华</div>
                    <div class="user-details">
                        <span>参与活动: 23次</span>
                        <span>积分: 2,100</span>
                        <span>志愿时长: 67h</span>
                    </div>
                </div>
            </div>
            
            <div class="user-item">
                <div class="user-avatar-large" style="background: linear-gradient(135deg, #9c27b0, #ba68c8);">陈</div>
                <div class="user-info">
                    <div class="user-name">陈丽</div>
                    <div class="user-details">
                        <span>参与活动: 8次</span>
                        <span>积分: 680</span>
                        <span>志愿时长: 24h</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 更新当前时间
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                weekday: 'long'
            });
            document.getElementById('currentTime').textContent = timeString;
        }
        
        // 页面加载时更新时间，之后每分钟更新一次
        updateTime();
        setInterval(updateTime, 60000);
        
        // 数据概览点击事件
        function showUserDetails() {
            alert('📊 用户详情\n\n总注册用户: 2,847\n本月新增: 156\n活跃用户: 1,523\n月活跃率: 53.5%\n\n用户分布:\n• 18-30岁: 45%\n• 31-50岁: 38%\n• 51岁以上: 17%');
        }
        
        function showActivityDetails() {
            alert('📊 活动详情\n\n发布活动总数: 68\n本月新增: 12\n进行中: 8\n即将开始: 15\n已结束: 45\n\n活动类型分布:\n• 志愿服务: 35%\n• 文化教育: 28%\n• 环保公益: 22%\n• 社区服务: 15%');
        }
        
        function showParticipantDetails() {
            alert('📊 参与详情\n\n总参与人次: 1,523\n本月参与: 289\n平均每活动: 22.4人\n复参率: 68%\n\n参与度排名:\n1. 环保类活动: 85%\n2. 文化类活动: 76%\n3. 社区服务: 71%');
        }
        
        function showVenueDetails() {
            alert('📊 阵地详情\n\n活跃阵地: 24个\n总阵地数: 28个\n使用率: 85.7%\n\n阵地类型:\n• 社区中心: 12个\n• 文化场馆: 8个\n• 学校场地: 4个\n• 公园广场: 4个');
        }
        
        // 活动管理功能
        function filterActivities(type) {
            // 移除所有active类
            document.querySelectorAll('.filter-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 添加active类到当前点击的tab
            event.target.classList.add('active');
            
            // 这里可以添加实际的筛选逻辑
            console.log('筛选活动类型:', type);
        }
        
        function createActivity() {
            alert('🎯 创建新活动\n\n功能包括:\n• 活动基本信息设置\n• 报名条件配置\n• 预算和资源分配\n• 活动流程规划\n• 宣传内容编辑\n\n功能开发中...');
        }
        
        function exportReport() {
            alert('📋 导出报表\n\n可导出报表:\n• 用户注册统计报表\n• 活动参与情况报表\n• 志愿服务时长统计\n• 阵地使用情况报表\n• 积分发放明细报表\n\n支持格式: Excel, PDF\n功能开发中...');
        }
        
        // 用户管理功能
        function viewUserProfile(userId) {
            const users = {
                'zhang': '张明的详细信息:\n• 注册时间: 2024-01-15\n• 参与活动: 15次\n• 获得积分: 1,250\n• 志愿时长: 48小时\n• 擅长领域: 环保宣传\n• 联系方式: 138****1234',
                'li': '李华的详细信息:\n• 注册时间: 2023-12-08\n• 参与活动: 23次\n• 获得积分: 2,100\n• 志愿时长: 67小时\n• 擅长领域: 文化教育\n• 联系方式: 139****5678',
                'chen': '陈丽的详细信息:\n• 注册时间: 2024-03-22\n• 参与活动: 8次\n• 获得积分: 680\n• 志愿时长: 24小时\n• 擅长领域: 社区服务\n• 联系方式: 137****9012'
            };
            
            alert('👤 用户档案\n\n' + (users[userId] || '用户信息不存在'));
        }
        
        function sendMessage(userId) {
            const message = prompt('💬 发送消息给用户\n\n请输入消息内容:');
            if (message && message.trim()) {
                alert('✅ 消息发送成功!\n\n消息已发送给用户，对方将收到系统通知。');
            }
        }
        
        // 模拟数据刷新
        function refreshData() {
            // 这里可以添加数据刷新逻辑
            console.log('刷新数据...');
        }
        
        // 页面加载完成后每5分钟自动刷新一次数据
        setInterval(refreshData, 300000);
    </script>
</body>
</html>